﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>点聚合显示</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=1c69b4a7bc3ff8773bcb6fa31605bb1c"></script>
<script language="javascript">
    var mapObj, cluster;
    var markers = [];
    /*
     *地图初始化&向地图随机加点
     */
    function mapInit() {
        mapObj = new AMap.Map("iCenter", {
            //二维地图显示视口
            view: new AMap.View2D({
                center: new AMap.LngLat(116.397428, 39.90923),//地图中心点
                zoom: 13 //地图显示的缩放级别
            })
        });

        // 随机向地图添加500个标注点
        var mapBounds = mapObj.getBounds();
        var sw = mapBounds.getSouthWest();
        var ne = mapBounds.getNorthEast();
        var lngSpan = Math.abs(sw.lng - ne.lng);
        var latSpan = Math.abs(ne.lat - sw.lat);

        for (var i = 0; i < 500; i++) {
            var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1), ne.lat - latSpan * (Math.random() * 1));
            var marker = new AMap.Marker({
                //map:mapObj,
                position: markerPosition, //基点位置
                icon: "http://developer.amap.com/wp-content/uploads/2014/06/marker.png", //marker图标，直接传递地址url
                offset: { x: -8, y: -34 } //相对于基点的位置
            });
            markers.push(marker);
        }
        addCluster(0);
    }
    
    /*
     *添加点聚合
     */
    function addCluster(tag) {
        if (cluster) {
            cluster.setMap(null);
        }
        if (tag == 1) {
            var sts = [{ url: "http://developer.amap.com/wp-content/uploads/2014/06/1.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -30) },
                { url: "http://developer.amap.com/wp-content/uploads/2014/06/2.png", size: new AMap.Size(32, 32), offset: new AMap.Pixel(-16, -30) },
                { url: "http://developer.amap.com/wp-content/uploads/2014/06/3.png", size: new AMap.Size(48, 48), offset: new AMap.Pixel(-24, -45), textColor: '#CC0066' }];
            mapObj.plugin(["AMap.MarkerClusterer"], function () {
                cluster = new AMap.MarkerClusterer(mapObj, markers, { styles: sts });
            });
        }
        else {
            mapObj.plugin(["AMap.MarkerClusterer"], function () {
                cluster = new AMap.MarkerClusterer(mapObj, markers);
            });
        }
    }
</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
    <div style="padding:2px 0px 0px 5px;font-size:12px">   
            <input type="button" value="自定义样式点聚合" onClick="javascript: addCluster(1)"/>
            <input type="button" value="默认样式点聚合" onClick="javascript: addCluster(0)"/>
    </div>
</body>
</html>           